<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>投诉记录</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .arrow-bottom.bb {
            transform: rotate(180deg)
        }

        .box-1 {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 3.75rem;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
        }

        .box-1 p {
            height: .47rem;
            justify-content: space-between;
            align-items: center;

            font-size: .16rem;
            color: rgba(18, 18, 18, 0.9);
        }

        .box-1 p span {
            flex: 1;
            margin-right: .08rem;
            text-align: right;
        }

        .box-1 p em {
            font-size: .14rem;
            flex: 6;
            color: rgba(255, 0, 0, 0.9);
        }

        .box-1 p input {
            color: rgba(18, 18, 18, 0.25);
            font-size: .14rem;
            flex: 6;
        }

        .box-1 .button {
            margin-top: .08rem;
            justify-content: space-between;
            align-items: center;
        }

        .box-1 .button span {
            width: 1.6rem;
            line-height: .32rem;
            display: block;
            text-align: center;
        }

        .box-1 .button .button-1 {
            background: rgba(255, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }

        .box-1 .button .button-2 {
            background: rgba(101, 180, 15, 1);
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
        }

        .box-1 .tip {
            height: auto;
            color: rgba(18, 18, 18, 0.25);
            font-size: .08rem;
            justify-content: space-between;
            align-items: center;
        }

        .box-1 .tip span {
            background: url(../img/起@2x.png) no-repeat left;
            padding-left: .11rem;
            background-size: .09rem .11rem;
            text-align: left;
        }

        .box-1 .tip em {
            flex: none;
            color: rgba(18, 18, 18, 0.25);
            font-size: .12rem;
        }

        .box-2,
        .box-3 {
            width: 100;
            /* height: 1.65rem; */
            background: #fff;
            box-sizing: border-box;
            padding: .12rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .box-2 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px;
        }

        .box-2 div {
            justify-content: space-between;
            align-items: center;
        }

        .box-2 div input {
            box-sizing: border-box;
            width: 1.4rem;
            line-height: .48rem;
            padding: .12rem;
            border: none;
            background: #fff;
            color: rgba(18, 18, 18, 1);
            font-size: .16rem;
        }

        .box-2 div span {
            text-align: center;
            display: block;
            width: 1.99rem;
            line-height: .48rem;
            background: rgba(18, 18, 18, 0.08);
        }

        .box-2 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }

        .box-2 .button,
        .box-3 .button {
            color: rgba(255, 255, 255, 1);
            font-size: .14rem;
            text-align: center;
            line-height: .32rem;
            width: 3.51rem;
            display: block;
            margin: 0 auto;
            background: rgba(95, 49, 4, 1);
            margin-top: .08rem;
        }

        .box-3 .t1 {
            font-size: .14rem;
            color: rgba(18, 18, 18, 0.9);
            margin-bottom: 8px
        }

        .box-3 div input {
            box-sizing: border-box;
            width: 3.51rem;
            line-height: .48rem;
            background: #fff;
            padding: 0 .12rem;
            color: rgba(18, 18, 18, 1);
        }

        .box-3 .t2 {
            font-size: .12rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: right;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">投诉记录</span>
        <span class="public-header-right" onclick='javascript:window.location.href="../page/My-footprints.html"'>足迹</span>
    </div>

    <!--正文-->
    <div class="buy-info-page bc-gray" @click='hide()'>
        <img :src="datas.produce_head_image" alt="">
        <!-- <img src="../img/配图@2x.png" alt=""> -->
        <section class="s1">
            <p class="t1">{{datas.produce_describe}} </p>
            <p class="t2">
                <span>{{datas.produce_add_time}}</span>
                <em class="e1" v-if='datas.is_return'>包退</em>
                <em class="e2" v-if="datas.is_free_shipping">包邮</em>
                <em class="e3" v-if="datas.is_Identifiable">可鉴定</em>
            </p>
            <p class="t3">
                <span>投诉</span>
                <em class="e3">{{datas.produce_share_num}}</em>
                <em class="e2" @click='add_Collection(this)'>{{datas.produce_collect_num}}</em>
                <em class="e1">{{datas.produce_good_num}}</em>


            </p>
            <p class="t4"><span>距离结束：</span><em>{{down_time}}</em></p>
        </section>
        <section class="s2 flex">
            <img :src="datas.store_image" alt="">
            <div class="right">
                <p><span>{{datas.store_name}}</span><em>VIP{{datas.store_level}}</em><i>{{guanzhu}}</i>
                    <font v-if="datas.store_authority"></font>
                </p>
                <p><span>联系卖家</span><i>{{datas.produce_money}}元</i><em>{{datas.store_score}}分</em></p>
            </div>
        </section>
        <!--最新成交-->
        <section class="s5">
            <p class="t1">
                <span class="t1-1">最新成交人</span>
                <span class="t1-2">更多</span>
            </p>
            <ul>
                <li class="flex" :class='{red:$index == 0,gray:$index>0}' v-for='item in datas.RecentTransaction'>
                    <div class="li-1">
                        <img :src="item.user_image" alt="">
                    </div>
                    <div class="li-2">
                        <p class="li-2-1">{{item.user_Name}}</p>
                        <p class="li-2-2">￥{{item.offer}}</p>
                    </div>
                    <div class="li-3">
                        <br> {{item.time}}
                    </div>
                </li>
            </ul>
            <em class="arrow-bottom"></em>
        </section>
        <section class="s6">

        </section>
        <section class="s3 flex">
            <div class="a1">
                <font>起</font><em>￥</em><i>{{datas.starting_price}}</i>
            </div>
            <div class="a2">
                <font>加</font><em>￥</em><i>{{datas.produce_auction_number}}</i>
            </div>
            <div class="a3">
                <font>保</font><em>￥</em><i>{{datas.auction_deposit}}</i>
            </div>
            <div class="a4">
                <font>延</font><em>￥</em><i>0</i>
            </div>
            <div class="a5">
                <font style="width: .42rem;">一口价</font><em>￥</em><i>{{datas.produce_money}}</i>
            </div>

        </section>
        <section class="s4">
            <p class=""><span>店铺产品</span><em>拍卖公告</em></p>
            <div>
                <ul class="clearfix">
                    <li class="" v-for='item in produce_list'>
                        <img :src="item.produce_head_image" alt="" @click='link_buy(this)'>
                        <p class="t1" v-html="{{item.produce_describe}}">4</p>
                        <p class="t2"><span>￥:{{item.starting_price}}起</span><em @click='add_good(this)' style="color:rgba(18,18,18,0.25)">{{item.produce_good_num}}</em></p>
                    </li>

                </ul>
            </div>
        </section>
    </div>


    <div class="buy-footer">
        <div class="c1" v-if="doing">
            <span @click='join_store(this)'>进店逛逛</span>
            <em>{{death_time}}</em>
        </div>
  
        <div class="c4" v-else>
            <div class="top">
                <p class="t1">
                    <span style="display:inline-block;background:url('../img/起 红@2x.png') no-repeat center;background-size:contain;width:.16rem;height:.16rem;"></span>
                    <em>￥:1000</em>
                </p>
                <p class="t2">
                    <span>距离结束：</span>
                    <em>{{down_time}}</em>
                </p>
                <p class="t3">
                    <em class="e1">{{datas.produce_good_num}}</em>
                    <em class="e2" @click='add_Collection(this)'>{{datas.produce_collect_num}}</em>
                    <em class="e3">{{datas.produce_share_num}}</em>


                </p>
                <p class="p4">{{datas.produce_describe}} </p>
            </div>
            <div class="bottom flex">
                <span @click='join_store(this)'>进店逛逛</span>
                <div class="center">
                    <p class="p1">一口价</p>
                    <p class="p2">￥{{datas.produce_money}}</p>
                </div>
                <em style="background:rgba(95,49,4,1);color:#fff" @click='ChangeStepType()'>出价</em>
            </div>
        </div>
    </div>


    <div class="box-1" v-if="step3">
        <p class="price flex">
            <span>领先价</span>
            <em>{{datas.RecentTransaction[0].offer}}元</em>
        </p>
        <p class="price-self flex" style="background:#fff;">
            <span>出价</span>
            <input type="number" pattern="\d*" placeholder="出价不能低于起价" v-model="price">
        </p>
        <div class="button flex">
            <span class="button-1">一口价 ￥{{datas.produce_money}}</span>
            <span class="button-2" @click='bid()'>确认</span>
        </div>
        <p class="tip flex">
            <span>￥{{datas.starting_price}}</span>
            <em>出价即表示同意《紫陶汇竞拍服务协议》</em>
        </p>
    </div>

    <div class="box-3" v-if="step1">
        <p class="t1">
            请输入你的电话号码，方便卖家联系
        </p>
        <div class="">
            <input type="number" pattern="\d*" placeholder="输入手机号码">

        </div>
        <p class="t2">
            验证号码后才能继续出价
        </p>
        <span class="button" @click='ChangeStepType()'>确认</span>
    </div>

    <div class="box-2" v-if="step2">
        <p class="t1">
            <span>验证码</span>
            <em>已发送至 131-1313-1313</em>
        </p>
        <div class="flex">
            <input type="number" pattern="\d*" placeholder="验证码" v-model="vInteger_0">
            <span>59s</span>
        </div>
        <p class="t2">
            验证号码后才能继续出价
        </p>
        <span class="button" @click='vInteger_click(this)'>确认</span>
    </div>


    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {
        
            $(window).scroll(function () {
                if ($(window).scrollTop() > 50) {
                    $('.buy-footer .c4 .top').css('display',
                        'none')
                } else {
                    $('.buy-footer .c4 .top').css('display',
                        'block')
                }
            })
              
            var s_id = getQueryString('s_id'),
                p_id = getQueryString('p_id');


            $.ajax({
                url: base_url + 'ZITAOHUI/auctionProduce',
                data: {
                    produceId: p_id,
                    user_id: 1,
                },
                success: function (data) {

                    let title = data.extend.list[0].produce_title;
                    // console.log(data)
                    $('title').html(title)
                }
            })

            function formatSeconds(value) {
                var theTime = parseInt(value); 
                var theTime1 = 0; 
                var theTime2 = 0; 
               
                if (theTime > 60) {
                    theTime1 = parseInt(theTime / 60);
                    theTime = parseInt(theTime % 60);
              
                    if (theTime1 > 60) {
                        theTime2 = parseInt(theTime1 / 60);
                        theTime1 = parseInt(theTime1 % 60);
                    }
                }
                var result = "" + parseInt(theTime) + "秒"
                if (theTime1 > 0) {
                    result = "" + parseInt(theTime1) + "分" + result;
                }
                if (theTime2 > 0) {
                    result = "" + parseInt(theTime2) + "小时" + result;
                }
                return result;
            }


            $('.box-3,.box-2,.box-1').on('click', function (e) {
                e.stopPropagation();
                $(document).one('click', function () {

                })
            })

            /************************/
            new Vue({
                el: 'body',
                data: {
                    guanzhu: '',
                    down_time: '',
                    price: '',
              
                    vInteger_0: '',
                    step1: false,
                    step2: false,
                    step3: false,
               
                    doing: false,
                   
                    death_time: ''
                },
                ready: function () {
                    let vm = this;
                    vm.$http.get(base_url + 'ZITAOHUI/auctionProduce', {
                        params: {
                            produceId: p_id,
                            user_id: 1,
                           
                        }
                    }).then(
                        function (response) {
                            console.log(response);
                            let all_data = response.data.extend.list[0];
                            let produce_list = response.data.extend.list4;
                            let guanzhu = response.data.extend.list2.status;
                            let down_time = response.data.extend.list3[0].surplusTime;

                          
                            vm.$set('a_id', response.data.extend.list3[0].auction_id)

                            let new_array = [];
                            console.log(produce_list)
                            for (let a = 0; a < produce_list.length; a++) {
                                if (produce_list[a] != null) {
                                    new_array.push(produce_list[a])
                                }
                            }
                            vm.$set('produce_list', new_array.slice(0, 4))

                            setInterval(function () {
                                if (down_time <= 0) {
                                 
                                    let time = new Date();
                                    vm.death_time = time.getMonth() + '月' + time.getDate() +
                                        '日'
                                } else {
                                    down_time = down_time - 1;
                                    vm.$set('down_time', formatSeconds(down_time))
                                }

                            }, 1000)

                            if (guanzhu == 1) {
                                vm.$set('guanzhu', '已关注')
                            } else {
                                vm.$set('guanzhu', '未关注')
                            }
                            console.log(all_data)
                            let RecentTransaction = all_data.RecentTransaction;
                            let add_time = new Date(all_data.produce_add_time);
                            all_data.produce_add_time = add_time.getMonth() + '月' + add_time.getDate() +
                                '日 ' + add_time.getHours() + ':' + add_time.getMinutes();

                            for (let i = 0; i < RecentTransaction.length; i++) {
                                let time = RecentTransaction[i].time;
                                let all_time = new Date(time);
                                RecentTransaction[i].time = all_time.getMonth() + '月' +
                                    all_time.getDate() + '日 ' + all_time.getHours() + ':' +
                                    all_time.getMinutes();

                            }

                            setTimeout(function () {

                                $('.s5 ul li:gt(1)').hide();
                                $('.arrow-bottom').click(function () {
                                    $('.s5 ul li:gt(1)').slideToggle();
                                    $(vm).toggleClass('bb')

                                })

                            }, 80);

                            vm.$set('datas', all_data)

                        }
                    )
                },
                methods: {
                    alert: function () {
                        var vm = this;

                    },
                    ChangeStepType: function () {
                        var vm = this;

                       
                        $.ajax({
                            url: base_url + 'ZITAOHUI/isfirst',
                            data: {
                                user_id: u_id,
                                au_id: vm.a_id,
                                store_id: s_id
                            },
                            success: function (data) {
                                console.log(data)
                                if (data.extend.list[0].msg == "不需要手机验证") {
                             
                                    vm.step3 = true;
                                } else {
                           
                                    vm.step2 = true

                                }
                            }
                        })

                    },
             
                    link_buy: function (t) {
                        console.log(t);
                        window.location.href = '../page/buy-info-page.3.html?p_id=' + t.item.produce_id

                    },
         
                    add_good: function (t) {
                        console.log(t)

                        this.$http.get(base_url + 'ZITAOHUI/goodNum', {
                            params: {
                                produceId: t.item.produce_id,
                                user_id: u_id
                            }
                        }).then(
                            function (data) {
                                console.log(data)
                                let sun = data.data.extend;
                                sun = sun.haha.list;
                                if (sun == 1) {
                                    t.item.produce_good_num += 1;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过赞啦')
                                }
                            }
                        )
                    },
              
                    add_Collection: function (t) {
                        console.log(t)
                        this.$http.get(base_url + 'ZITAOHUI/conllectionNum', {
                            params: {
                                produceId: p_id,
                                user_id: u_id
                            }
                        }).then(
                            function (data) {
                                console.log(data)
                                let sun = data.data.extend;
                                sun = sun.list.conllection;
                                if (sun == 1) {
                                    t.datas.produce_collect_num += 1;
                                } else if (sun == 2) {
                                    alert('网络不好，请稍后再试')
                                } else {
                                    alert('您已经对该商品点过收藏啦')
                                }
                            }
                        )
                    },
             
                    join_store: function (t) {
                        console.log(t)
                        window.location.href = "../page/Shop.html?s_id=" + t.datas.storeId
                    },
              
                    bid: function () {
                        console.log(this.datas.RecentTransaction[0].offer, this.datas.produce_auction_number)
                 
                        if (this.price >= this.datas.RecentTransaction[0].offer + this.datas.produce_auction_number) {
                            $.ajax({
                                url: base_url + 'ZITAOHUI/istheFirstOfer',
                                data: {
                                    au_id: this.a_id,
                                    user_id: u_id,
                                    store_id: s_id,
                                    money: this.price
                                },
                                success: (data) => {
                                    console.log(data)
                                    alert(data.extend.list[0].msg)
                                    this.step3 = false;
                                }
                            })
                        } else {
                            alert('您的出价不正确')
                        }

                    },
                  
                    vInteger_click: (t) => {
                        console.log(t.vInteger_0)
                        console.log(t)
                        $.ajax({
                            url: base_url + 'ZITAOHUI/phoneVi',
                            data: {
                                vInteger: t.vInteger_0
                            },
                            success: (data) => {
                                console.log(data)
                                if (data.extend.msg == "验证成功") {
                                    alert(data.extend.msg)
                                    t.step2 = false
                                }
                            }
                        })
                    },
             
                    hide: function () {
                        this.step1 = false;
                        this.step2 = false;
                        this.step3 = false;
                    }
                }
            })
        })
    </script>

</body>

</html>